<template>
  <div class="wn-flow">
    <div class="header">
      <div class="menu" v-if="flowStep!=3">
        <li v-for="(item, index) in flowMenu" :key="index" :class="flowStep>=index?'act':''">
          <div
            class="icon"
            :style="{backgroundImage:'url(static/images/flow_'+index+'.png)'}"
            v-if="flowStep<index"
          ></div>
          <div
            class="icon act"
            :style="{backgroundImage:'url(static/images/flow_'+index+'_act.png)'}"
            v-if="flowStep>=index"
          ></div>
          <div class="desc">
            <span>{{item.tit}}</span>
          </div>
        </li>
      </div>
      <div class="feedback-tit" v-if="flowStep===3">
        <h2>资料正在审核中</h2>
        <p>审核结果将通过官方微信平台告知 谢谢您的参与！</p>
      </div>
    </div>
    <div class="main">
      <div class="main-inner">
        <wnForm v-on:flowStep="flowStepOn" v-if="flowStep!=3"/>
        <feedback v-if="flowStep===3"/>
      </div>
    </div>
  </div>
</template>

<script>
import wnForm from './form.vue'
import feedback from './feedback.vue'
export default {
  components: {
    wnForm,
    feedback
  },
  data () {
    return {
      flowMenu: [
        {
          tit: '填写个人信息',
          button: '确认信息',
        },
        {
          tit: '上传门店信息',
          button: '下一步',
        },
        {
          tit: '请核对信息',
          button: '提交审核',
        }
      ],
      flowStep: 0,
      formTit: '请完善个人信息',
      submitAble: true
    }
  },
  methods: {
    flowStepOn (e) {
      this.flowStep = e
    }
  }
}
</script>
<style lang='stylus' scoped>
@import '../../assets/styles/index.styl'
.wn-flow {
  background-image url('../../assets/images/flow_head.jpg')
  background-color #fff
  background-position center top
  background-size 100% auto
  background-repeat no-repeat
  padding-bottom 50px
  position relative
  .header {
    .menu {
      text-align center
      padding 25px 0 15px
      li {
        height 80px
        display inline-block
        position relative
        &:nth-child(2) {
          margin 0 35px
          & .icon {
            position relative
            &:before, &:after {
              content ''
              display inline-block
              position absolute
              left -40px
              height 15px
              width 35px
              top 50%
              transform translateY(-50%) rotate(180deg)
              background-image url('../../assets/images/flow_bridge.png')
              background-size contain
              background-repeat no-repeat
              background-position center
            }
            &:after {
              left unset
              right -40px
              transform translateY(-50%) rotate(180deg)
            }
          }
        }
        &.act {
          & .desc {
            color #fff
          }
        }
        .icon {
          display inline-block
          background-color rgba(255, 255, 255, 0.5)
          height 50px
          width 50px
          border-radius 50%
          background-size 50%
          background-position center
          background-repeat no-repeat
          box-shadow 0 1px 3px rgba(26, 26, 26, 0.1)
          &.act {
            background-color rgba(255, 255, 255, 1)
          }
        }
        .desc {
          font-size 12px
          color #e92964
          span {
            float left
            position relative
            left 50%
            transform translateX(-50%)
          }
        }
      }
    }
    .feedback-tit {
      text-align center
      padding 30px
      color #fff
      h2 {
        font-size 24px
      }
      p {
        font-size 12px
        opacity 0.7
      }
    }
  }
  .main {
    width 85%
    background #fff
    min-height 200px
    margin 0 auto
    margin-bottom 10px
    padding-bottom 30px
    border-radius 5px
    box-shadow 0px 2px 4px rgba(26, 26, 26, 0.18)
    position relative
    &:before, &:after {
      content ''
      display inline-block
      position absolute
      top 0
      bottom 0
      left 0
      right 0
      background #fff
      z-index 1
      border-radius 5px
    }
    &:after {
      bottom unset
      height 200px
      z-index 0
      background #a7253d
      filter blur(7px)
      transform-origin center top
      transform scaleX(0.95) scaleY(0.995)
      opacity 0.6
    }
    .main-inner {
      position relative
      z-index 2
      padding 15px
      .title {
        text-align center
        padding 10px 0
        h2 {
          font-size 18px
          color c3
        }
      }
      .submit {
        position relative
        text-align center
        padding 15px
        border-radius 50px
        &:before, &:after {
          content ''
          display inline-block
          position absolute
          top 0
          bottom 0
          left 0
          right 0
          background linear-gradient(45deg, #ff5d51, #ff893a)
          background #ccc
          z-index 1
          border-radius 3px
          border-radius 50px
          transition transform 0.3s ease
        }
        &:after {
          z-index 0
          background #b6382f
          filter blur(5px)
          transform-origin center bottom
          transform scaleX(0.9) scaleY(0.9)
          transform scaleX(0.9) scaleY(0.5)
          opacity 0.8
          opacity 0
        }
        span {
          position relative
          z-index 2
          padding 15px
          color #fff
        }
        &.act {
          &:before {
            background linear-gradient(45deg, #ff5d51, #ff893a)
          }
          &:after {
            opacity 0.8
            transform scaleX(0.9) scaleY(0.9)
          }
        }
      }
      .subInfo {
        margin-top 15px
        font-size 12px
        color c3
        opacity 0.7
      }
      .form {
      }
    }
  }
}
</style>